<template>
    <div id="MyDetailMoney">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="getMy"></i>
            <span>钱包明细</span>
            <i class="iconfont iconzuojiantou" style="color: rgba(0,0,0,0);"></i>
        </div>
        <div class="MyDetailMoney-box">
            <div class="MyDetailMoney-heard">
                <div class="PartTimelist">
                    <span @click="PartTimelist" :style="PartTimelistColor">收入记录</span>
                    <span :style="PartTimelistColorbackground"></span>
                </div>
                <div class="MyPartTime">
                    <span @click="MyPartTime" :style="MyPartTimeColor">提现记录</span>
                    <span :style="MyPartTimeColorbackground"></span>
                </div>
            </div>
            <router-view/>
        </div>
    </div>
</template>
<script>
export default {
    name:"MyDetailMoney",
    data() {
        return {
            PartTimelistShow: true,
            MyPartTimeShow : false,
        }
    },
    mounted(){
        // // 监听浏览器返回
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
        //判断加载路径
        if(this.$route.path == "/MyDetailMoney/ProofOfIncome"){
            this.PartTimelistShow = true;
            this.MyPartTimeShow = false;
        }
        else{
            this.PartTimelistShow = false;
            this.MyPartTimeShow = true;
        }
    },  
    destroyed(){
        // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.goBack, false);
    },
    computed: {
        PartTimelistColor(){
            return this.PartTimelistShow ? {color:"green"}:{};
        },
        PartTimelistColorbackground(){
            return this.PartTimelistShow ? {background:"green"}:{};
        },
        MyPartTimeColor(){
            return this.MyPartTimeShow ? {color:"green"}:{};
        },
        MyPartTimeColorbackground(){
            return this.MyPartTimeShow ? {background:"green"}:{};
        }
    },
    methods: {
        getMy(){
            this.$router.push("/Mymi");
        },
        PartTimelist(){
            if(this.$route.path != "/MyDetailMoney/ProofOfIncome"){ 
                this.$router.push("ProofOfIncome");
                this.PartTimelistShow = true;
                this.MyPartTimeShow = false;
            }
        },
        MyPartTime(){
             if(this.$route.path != "/MyDetailMoney/WithdrawDeposit"){
                this.$router.push("WithdrawDeposit");
                this.PartTimelistShow = false;
                this.MyPartTimeShow = true;
             }
        },
        // //浏览器点击返回跳转路径
        goBack(){
            if(this.$route.path == "/MyDetailMoney/ProofOfIncome" || this.$route.path == "/MyDetailMoney/WithdrawDeposit"){
                this.$router.push("/Mymi");
            }
           
            //replace替换原路由，作用是避免回退死循环
        }
    },
}
</script>
<style lang="less" scoped>
#MyDetailMoney{
    width: 100%;
    height: 100%;
    background: rgb(248, 248, 248);
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#333333;
        height: 1.25rem;
        line-height: 1.25rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
        background: #FFFFFF;
    }
    .MyDetailMoney-box{
        width: 100%;
        height: auto;
        background: white;
        margin-top: .2rem;
        .MyDetailMoney-heard{
            width: 100%;
            height: .88rem;
            font-size: .28rem;
            display: flex;
            border-bottom: .02rem solid rgb(248, 248, 248);
            .PartTimelist{
                width: 3.75rem;
                height: .88rem;
                text-align: center;
                span:nth-child(1){
                    line-height: .88rem;
                }
                span:nth-child(2){
                    display: block;
                    width: 1.14rem;
                    height: .02rem;
                    margin: 0 auto;
                }
            }
            .MyPartTime{
                width: 3.75rem;
                height: .88rem;
                text-align: center;
                span:nth-child(1){
                    line-height: .88rem;
                }
                span:nth-child(2){
                    display: block;
                    width: 1.14rem;
                    height: .02rem;
                    margin: 0 auto;
                }
            }
        }

    }
}
</style>